{% extends "layout.html" %}

{% block body %}


<form class="form-horizontal" method="post">
{%   if (taxo|length())>0 %}
    <h3>Taxonomy Manual Mapping</h3>
    <p>Note : If needed, for complex cases, Taxonomy element creation must but handled by administrator prior execution of import task</p>
    <table class="table table-bordered table-condensed" style="width: 700px">
    <tr><td width="300">Imported Taxonomy</td><th>Map</th><th >Create<br>Under</th><th >Target Taxonomy</th></tr>

    {% for T in taxo %}
  <tr><td width="300">
  <label class="control-label" for="taxolb{{ loop.index }}">{{ loop.index~" - "~T.namefull }}</label>
{#   {{ label(loop.index~" - "+T)  }} #}
      <input type="hidden" name="orig{{ loop.index }}" value="{{ T.id }}">
      <input type="hidden" name="origname{{ loop.index }}" value="{{ T.name }}">
  </td><td align="center">      <input type="radio" name="action{{ loop.index }}" value="M">
  </td><td align="center">      <input type="radio" name="action{{ loop.index }}" value="U">
  </td><td width="250">
    <div class="input-group">
       <select id="taxolb{{ loop.index }}" name="taxolb{{ loop.index }}" style="width: 210px" class='taxolb' > </select>
            <span class="input-group-btn">
                <button class="btn btn-default btn-sm" type="button"  data-toggle="modal" data-target="#TaxoModal" data-mytargetid="taxolb{{ loop.index }}">
                    <span id=OpenTaxoLB class="glyphicon glyphicon-th-list" aria-hidden="true"></span></button>
        </div><!-- /input-group -->
  </td>
  </tr>
    {% endfor %}
    </table>

{% endif %}


{%   if (users|length())>0 %}
    <h3>Users Manual Mapping</h3>
    <p>Note : If needed, Users creation must but handled by administrator prior execution of import task</p>
    <table class="table table-bordered table-condensed" style="width: 600px">
    <tr><td width="300">Imported User Name</td><th>Map to</th><th >Create</th></tr>
    {% for U in users %}
  <tr><td >
<label class="control-label" for="userlb{{ loop.index }}">{{ loop.index~" - "+U }}</label>
      <input type="hidden" name="origuser{{ loop.index }}" value="{{ U }}">
  </td><td>
       <select id="userlb{{ loop.index }}" name="userlb{{ loop.index }}" style="width: 210px" class='userlb' > </select>
  </td><td align="center">      <input type="radio" name="useraction{{ loop.index }}" value="C">
  </tr>
    {% endfor %}
</table>
{% endif %}


    <input type="hidden" name="starttask" value="Y">
    <div class="form-group">
    <div class="col-sm-offset-2 col-sm-2">
      <button type="submit" class="btn btn-primary">Continue Task</button>
    </div>
  </div>
</form>


 <script>
$(document).ready(function() {
    $(".taxolb").select2({
        ajax: {
            url: "/search/taxo",
            dataType: 'json',
            delay: 250,
            data: function (params) {  return { q: params.term, page: params.page };  },
            processResults: function (data, page) { return { results: data};  },
            cache: true
        },
        minimumInputLength: 3
    }); // Select2 Ajax
    $(".userlb").select2({
        ajax: {
            url: "/search/users",
            dataType: 'json',
            delay: 250,
            data: function (params) {  return { q: params.term, page: params.page };  },
            processResults: function (data, page) { return { results: data};  },
            cache: true
        },
        minimumInputLength: 2
    }); // Select2 Ajax
    $('#TaxoModal').on('show.bs.modal', function (e) {
        var button = $(e.relatedTarget); // Button that triggered the modal
        var targetid = button.data('mytargetid');
         $("#TaxoModalBody").html("Loading...");
         $("#TaxoModalBody").load("/search/taxotree?target="+targetid);
    });
    }); // Ready
 </script>


<!-- Modal -->
<div class="modal " id="TaxoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="ModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <div id="TaxoModalBody">...</div>
      </div>
    </div>
  </div>
</div>


{% endblock %}